import React from 'react';
import { Result, Table, Row, Col, Button, Tooltip} from 'antd';
import './index.less';
import { IconFont } from '../../../../components/IconFont';
const creatHistory = require('history').createHashHistory
const history = creatHistory();
export default function(props) {
  const goback = () => {
    history.goBack();
  }
  return (
    <>
      <div className='strategy-template-content'>
        <div className='strategy-export-success'>
           <Result
             icon={<IconFont type={(props.data.total && 'iconsuccess-') || 'iconerror-'} style={{ fontSize: '42px', fontWeight: 'normal' }} />}
             title={(props.data.total && '导入成功') || '导入失败'}
             subTitle={ `本次共导入
             ${props.data.total}个策略模板`}
           />
           <Row type='flex' justify='center'>
               <Col span={12} style={{ textAlign: 'center' }}>
                 <Button type='primary' onClick={() => goback()}>
                   确定
                 </Button>
               </Col>
           </Row>
        </div>
        <Row type='flex'>
          <Table
              className='strategy-template-table'
              dataSource={props.data.list}
              columns={[
                {
                  title: '序号',
                  render: (text, record, index) => {
                    return <>{index + 1}</>;
                  }
                },
                {
                  title: '策略模板名称',
                  key: 'name',
                  dataIndex: 'name',
                  width: 200,
                  render: (text, record) => {
                    return (
                      <Tooltip title={text} placement='topLeft'>
                        {text}
                      </Tooltip>
                    );
                  }
                },
                {
                  title: '描述',
                  key: 'remark',
                  dataIndex: 'remark',
                  width: 200,
                  render: (text, record) => {
                    return (
                      <Tooltip title={text} placement='topLeft'>
                        {text}
                      </Tooltip>
                    );
                  }
                },
                {
                    title: '可见部门',
                    key: 'dept_arr',
                    dataIndex: 'dept_arr',
                    width: 200,
                    render: (text, record) => {
                      return (
                        <Tooltip title={text.name.join()} placement='topLeft'>
                          {text.name.join()}
                        </Tooltip>
                      );
                    }
                  },
                {
                  title: '导入状态',
                  key: 'import_status',
                  dataIndex: 'import_status',
                  width: 200,
                  render: (text, record) => {
                    return (text && '导入成功') || '导入失败';
                  }
                }
              ]}
              rowKey='strategy_id'
              pagination={false}
            ></Table>
        </Row>
      </div>
    </>
  );
}
